<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-row style="margin-bottom: 20px;">
          <el-button type="primary" @click="dialogFormVisible = true">新增目录</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = true">上传视频</el-button>
        </el-row>
        <el-tree
          :data="data"
          :props="defaultProps"
          highlight-current
          accordion
        >
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="4" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 1 : 0">
            <el-card :body-style="{ padding: '0px' }">
              <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1675326140,1646784025&fm=26&gp=0.jpg" class="image">
              <div style="padding: 14px;">
                <span>学习视频</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="text" class="button">查看</el-button>
                  <el-button type="text" class="button">下载</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog title="新增目录" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form">
        <el-form-item label="目录名称" :label-width="formLabelWidth">
          <el-input type="input" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="上传视频" :visible.sync="dialogFormVisible2" width="40%">
      <el-form :model="form">
        <el-form-item label="文件名称" :label-width="formLabelWidth">
          <el-input type="input" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="附件" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "explorer",
    data() {
      return {
        dialogFormVisible2: false,
        formLabelWidth: "120px",
        dialogFormVisible: false,
        currentDate: new Date(),
        form: {},
        data: [{
          label: '班级 1',
          children: [{
            label: '课件 1',
            children: [{
              label: '课件 1-1'
            }]
          }]
        }, {
          label: '班级 2',
          children: [{
            label: '课件 2',
            children: [{
              label: '课件 2-1'
            }]
          }, {
            label: '课件 2-2',
            children: [{
              label: '课件 2-2-1'
            }]
          }]
        }, {
          label: '班级 3',
          children: [{
            label: '课件 3-1',
            children: [{
              label: '课件 3-1-1'
            }]
          }, {
            label: '课件 3-2',
            children: [{
              label: '课件 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
